import React = require("react");
import { PageProps } from "maishu-chitu-react";
import { FormValidator, rules } from "maishu-dilu"
import { MemberService } from "services/member";
import { ImageService } from "maishu-services-sdk";
import * as ui from "maishu-ui-toolkit";
import imageManager from "controls/image-manager";
import { Service } from "services/service";
import site from "site";

let { protocol, port, host } = location;
let storeHomeUrl = `${protocol}//${host}/user/?appKey=${Service.appToken}`;

export default class StationIndexPage extends React.Component<PageProps, { store: Store }>{
    private qrcodeElement: HTMLElement;
    private nameInput: HTMLInputElement;
    private validator: FormValidator;
    element: HTMLElement;
    memberServie: MemberService;
    imageService: ImageService;

    constructor(props) {
        super(props);
        this.state = { store: {} as Store };

        let app = this.props.app;
        this.memberServie = this.props.createService(MemberService);
        this.imageService = new ImageService((err) => app.error.fire(app, err, app.currentPage)) //this.props.createService(ImageService);

    }
    async save() {
        let isValid = await this.validator.check();
        if (!isValid)
            return Promise.reject({});

        return this.memberServie.saveStore(this.state.store);
    }

    async componentDidMount() {
        let { required } = rules;
        this.validator = new FormValidator(this.element,
            { name: "name", rules: [required("店铺名称不能为空")] }
        )

        let qrcode = new QRCode(this.qrcodeElement, {
            text: site.userClientUrl,
            width: 160,
            height: 160,
        });
        qrcode.makeCode(site.userClientUrl);

        // let storeId = site.appIdFromLocation();
        let store = await this.memberServie.getStore();
        store = store || {} as any
        this.setState({ store });

        this.nameInput.value = store.Name;
    }
    render() {
        let { store } = this.state;

        return (
            <div className="station-index" ref={e => this.element = e || this.element}>
                <ul className="nav nav-tabs">
                    <li className="dropdown pull-right">
                        <button className="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i className="icon-sitemap"></i>
                            <span>访问店铺</span>
                        </button>
                        <div className="dropdown-menu dropdown-menu-right" style={{ padding: 20 }}>
                            <div style={{ width: '100%', textAlign: 'center' }}>手机扫码访问</div>
                            <div style={{ width: 180, height: 180, padding: 10 }}
                                ref={(e: HTMLElement) => this.qrcodeElement = e || this.qrcodeElement} />
                            <div style={{ width: '100%' }}>
                                <button className="pull-left btn-link"
                                    ref={(e: HTMLButtonElement) => {
                                        if (!e) return;

                                        var clipboard = new ClipboardJS(e, {
                                            text: function () {
                                                return storeHomeUrl;
                                            }
                                        });

                                        clipboard.on('success', function (e) {
                                            ui.toast('商品链接已经成功复制');
                                        });

                                        clipboard.on('error', function (e) {
                                            ui.alert('商品链接已经成功失败');
                                        });
                                    }}>
                                    复制页面链接
                                </button>
                                <div className="pull-right">
                                    <button className="btn-link"
                                        onClick={() => {
                                            // let url = userApp.createUrl(siteMap.nodes.home_index);
                                            window.open(storeHomeUrl, "_blank");
                                        }}>
                                        电脑访问
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li className="pull-right">
                        <button className="btn btn-sm btn-primary"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = ui.buttonOnClick(() => this.save(), { toast: "保存成功" });
                            }}>
                            <i className="icon-save"></i>
                            <span>保存</span>
                        </button>
                    </li>
                </ul>
                <div className="clearfix">
                </div>
                <div className="well" style={{ minHeight: 100 }}>
                    <div className="row form-group">
                        <div className="col-lg-12">
                            <label className="col-md-4" style={{ width: 120 }}>店铺名称*</label>
                            <div className="col-md-8" style={{ maxWidth: 300 }}>
                                <input name="name" className="form-control"
                                    onChange={(e) => {
                                        store.Name = (e.target as HTMLInputElement).value;
                                        this.setState(this.state);
                                    }}
                                    ref={(e: HTMLInputElement) => this.nameInput = e || this.nameInput} />
                            </div>
                        </div>
                    </div>
                    <div className="row form-group">
                        <div className="col-lg-12">
                            <label className="col-md-4" style={{ width: 120 }}>店铺图标</label>
                            <div className="col-md-8" style={{ maxWidth: 300 }}>
                                <img className="img-responsive" title="点击上传店铺图标"
                                    src={store.ImagePath ? this.imageService.imageSource(store.ImagePath) : null}
                                    ref={(e: HTMLImageElement) => {
                                        if (!e) return;
                                        ui.renderImage(e, { imageSize: { width: 300, height: 300 } });
                                        e.onclick = () => {
                                            imageManager.show((imageIds) => {
                                                store.ImagePath = imageIds[0];
                                                this.setState(this.state);
                                            })
                                        }
                                    }} />
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        );
    }
}